<template>
  <div>
    <el-col :span="24" class="content_title">
      <el-col :span="12">
        <HeadTitle></HeadTitle>
      </el-col>
      <el-col :span="12">
        <el-button
          :loading="$store.state.isLoading"
          type="primary"
          @click="openDio"
          class="f_r"
          size="mini"
        >添加</el-button>
      </el-col>
    </el-col>
    <div class="clearfix">
      <el-col :span="24" class="pd_20 clearfix">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          row-key="id"
          element-loading-text="拼命加载中"
          :data="materialList"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="标题" min-width="200">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="模板表的标题" min-width="200">
            <template slot-scope="scope">{{ scope.row.tid_cn }}</template>
          </el-table-column>

          <el-table-column label="可选参数" min-width="300">
            <template slot-scope="scope">{{ scope.row.op}}</template>
          </el-table-column>

          <el-table-column label="添加时间" min-width="150">
            <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat2 }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="updateItem(scope.row)"
              >编辑</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="danger"
                @click="deleteItems( scope.$index, scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="消息管理"
      v-loading="dioLoading"
      width="800px"
      class="tl size_13"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" :rules="formYZ" ref="form" :label-width="formLabelWidth">
        <el-form-item label="标题" prop="title">
          <el-col :span="15">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="可选参数" prop="op">
          <el-col :span="15">
            <el-input type="textarea" :rows="4" placeholder="请输入大括号参数,如：{用户ID}" v-model="form.op"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="submitForm('form')"
          >确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import Sortable from "sortablejs";
export default {
  components: {
    HeadTitle
  },
  data() {
    return {
      materialList: [],
      dialogFormVisible: false,
      dioLoading: false,
      form: {
        title: ""
      },
      formLabelWidth: "120px",
      formYZ: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }]
      },
      loading: false
    };
  },
  methods: {
    openDio() {
      this.dialogFormVisible = true;
      this.form = {
        title: ""
      };
    },
    getSmsList() {
      this.loading = true;
      var id = this.$store.state.sms_id;
      var params = { tid: id };
      this.$api.getWechat.getSmsList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          this.materialList = res.data.result;
          this.loading = false;
        }
      });
    },
    deleteItems(index, id) {
      var _this = this;
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getWechat.deleteSmsItem(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              _this.materialList.splice(index, 1);
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    submitForm(formName) {
      var _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.dioLoading = true;
          var params = _this.form;
          params.tid = _this.$store.state.sms_id;
          if (params.id) {
            _this.$api.getWechat.updateSmsItemTitle(params).then(res => {
              if (res.data.code == 200 && res.data.result != null) {
                _this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                //_this.materialList[this.uddateIndex]=_this.form;
              } else {
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          } else {
            _this.$api.getWechat.addSmsItem(params).then(res => {
              if (res.data.code == 200 && res.data.result != null) {
                _this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                _this.getSmsList();
              } else {
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
          _this.dioLoading = false;
          _this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
    updateItem(row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      var aa = Sortable.create(tbody, {
        onChange({ newIndex, oldIndex }) {
          const currRow = _this.materialList.splice(oldIndex, 1)[0];
          _this.materialList.splice(newIndex, 0, currRow);
        },
        onEnd({ newIndex, oldIndex }) {
          var data = {};
          var sort_str = [];
          for (var i in _this.materialList) {
            sort_str.push(_this.materialList[i].id);
          }
          data.sort_str = sort_str.join("@");
          if (data.sort_str) {
            _this.$api.getWechat.sortSmsItem(data).then(res => {
              if (!res.data.result) {
                _this.$fnc.alertError(res.data.code_desc, res.data.result);
              }
            });
          }
        }
      });
    }
  },
  mounted() {
    this.rowDrop();
    this.getSmsList();
  }
};
</script>
